<script setup>

//import axios from 'axios'
import { ref  ,onMounted} from 'vue'
import { ElMessage } from 'element-plus'
import { queryAllApi, addDeptApi,queryByIdApi,updateByIdApi,deleteDeptApi } from '@/api/dept'


const tableData =ref([])

const queryAll=async ()=>{
    const result = await queryAllApi()
    //将数据赋值给集合对象
    tableData.value=result.data;
}

//新增部门对话框标题
const formTitle = ref('')
//新增部门对话框状态
const showDialog = ref(false)
// 表单数据
const deptForm = ref({name: ''})

//初始化新增框
const add= () =>{
  formTitle.value = '新增部门'
  showDialog.value = true
  deptForm.value = {name: ''}
}


// 表单验证规则
const formRules = ref({
  name: [
    { required: true, message: '请输入部门名称', trigger: 'blur' },
    { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]
})


// 表单引用
const deptFormRef = ref(null)
//重置表单
const resetForm = () => {
  deptFormRef.value.resetFields()
}


// 提交表单
const save = async () => {
  let msg='';//在函数作用域内声明的变量
  await deptFormRef.value.validate(async valid => {
    if (!valid) return
    // 提交表单
    let result = null;
    if(deptForm.value.id){
      // 如果有 id，说明是“编辑”操作
        result = await updateByIdApi(deptForm.value)
        msg="修改成功"
    }else{
       // 没有 id，说明是“新增”操作
      result = await addDeptApi(deptForm.value)
      msg="添加成功"
    }
    if(result.code){
      //弹框提示
      ElMessage.success(msg)
      // 关闭对话框
      showDialog.value = false
      // 重置表单
      resetForm()
      // 重新加载数据
      queryAll()
    }else {
      //弹框提示
      ElMessage.error(msg+'失败')
    }
  })
}

//删除
const deleteById= async (row) =>{
  let result = await deleteDeptApi(row.id)
  if(result.code==1){
    ElMessage.success('删除成功');
  }else{
    ElMessage.error('删除失败');
  }
  queryAll()
}



// Vue挂载完成后，做预加载
onMounted(()=>{
  // 预加载
  queryAll()
})

//根据ID 查询部门信息
const queryById = async (row) =>{
  formTitle.value='修改部门'
    //显示弹框
  showDialog.value = true
  const result = await queryByIdApi(row.id)
  deptForm.value.id=result.data.id
  deptForm.value.name=result.data.name
    
}

</script>

<template>
  
<h2>部门管理</h2>


  <el-button type="primary" style="float: right;" @click="add()">添加部门</el-button>

  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="name" label="部门名称" width="180" />
    <el-table-column prop="createTime" label="最后修改时间"  width="300"/>
    <el-table-column fixed="right" label="操作" align="center">
          <template #default="scope ">
            <el-button size="small" type="success" @click="queryById(scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="deleteById(scope.row)">删除</el-button>
          </template>
    </el-table-column>
  </el-table>


    <!-- 新增部门的对话框 -->
  <el-dialog v-model="showDialog" :title="formTitle" width="30%" @close="resetForm">

    <el-form :model="deptForm" :rules="formRules" ref="deptFormRef">
      <el-form-item label="部门名称" prop="name" label-width="80px">
        <el-input v-model="deptForm.name" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>

      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </span>

    </template>

  </el-dialog>

</template>

<style scoped>

</style>
